page{
    background: #F5F5F5;
}
.top-card-layout{
    @include wh(100%);
    background-color: #f5f5f5;
    .info-card{
        @include flex(flex-start,space-between);
       background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%);
       padding: 40rpx 24rpx;
       box-sizing: border-box;
        .left{
            @include flex(center,flex-start);
    
            .portrait{
                @include wh(100rpx,100rpx);
                margin-right: 24rpx;
                image{
                    @include wh(100%,100%);
                    border-radius: 50%;
                }
            }
            .left-content{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
    
                .nikeName{
                    @include wh(288rpx);
                    @include fonts(32rpx,#222222,bold);
                    @extend %text-overflow;
                    margin-bottom: 16rpx;
                }
                .label-layout{
                    @include flex(center,flex-start);
                    .label-item{
                        @include wh(70rpx,40rpx);
                        @include flex(center,center);
                        @include fonts(28rpx,#FFF0DA);
                        margin-right: 20rpx;
                        background: #967E4F;
                        border-radius: 4rpx;
                    }
                    .label{
                        @include wh(162rpx,44rpx);
                        @include flex(center,space-between);
                        @include fonts(26rpx,#967E4F,bold);
                        padding: 4rpx 12rpx;
                        box-sizing: border-box;
                        background: rgba(150,126,79,0.1);
                        border-radius: 8rpx;
                        image{
                            @include wh(30rpx,30rpx);
                            margin-right: 4rpx;
                        }
                    }
                }
                
            }
        }
    
        .right{
            @include flex(center,flex-end);
    
            .but{
                @include fonts(28rpx,#FFFFFF,bold);
                padding: 8rpx 38rpx;
                box-sizing: border-box;
                background: #222222;
                border-radius: 4rpx;
            }
            .active{
                @include fonts(28rpx,#636569,bold);
                background: #F5F5F5;
            }
            .message{
                @include wh(72rpx,56rpx);
                @include flex(center,center);
                background: #F5F5F5;
                border-radius: 4rpx;
                margin-left: 32rpx;
                image{
                    @include wh(40rpx,40rpx);
                }
            }
        }
    }

    .card-fixed-block{
        @include flex(flex-start,flex-start);
        padding: 24rpx 24rpx 10rpx 24rpx;
        box-sizing: border-box;
        background-color: #f5f5f5;

        .item{
            @include fonts(32rpx,#939395);
            margin-right: 64rpx;
        }

        .selects{
            @include fonts(32rpx,#222222,bold);
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 8rpx;

            .line{
                @include wh(16rpx,6rpx);
                background: #222222;
            }
        }

    }
    
}


.scroll-view{
    padding: 10rpx;
    padding-top: 315rpx;
    box-sizing: border-box;

    .list-layout {
        @include wh(100%);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        position: relative;

        
        .list-card {
            @include wh(calc((100% - 10rpx) / 2),620rpx);
            background: #ffffff;
            margin-bottom: 10rpx;

            .goodsImg {
                @include wh(100%, 360rpx);
                @include flex(center, center);
                position: relative;
                image {
                    @include wh(272rpx, 272rpx);
                }
                .like-icon{
                    @include wh(48rpx,48rpx);
                    position: absolute;
                    right: 22rpx;
                    top: 22rpx;
                }
            }

            .text-content {
                padding: 12rpx 24rpx 40rpx 12rpx;
                box-sizing: border-box;

                .title {
                    @include fonts(28rpx, #222222, bold);
                    margin-bottom: 24rpx;
                    @extend %text-overflow;
                }

                .content {
                    @include fonts(24rpx, #939395, 400);
                    @include text-overflow-many(2);
                    margin-bottom: 16rpx;
                }

                .money {
                    @include flex(flex-end, flex-start);

                    .price {
                        @include fonts(32rpx, #222222, bold);
                    }

                    .originalPrice {
                        @include fonts(24rpx, #939395, 400);
                        text-decoration: line-through;
                        margin-left: 12rpx;
                    }
                }
            }
        }
    } 
}
